{% extends 'base.html' %}
{% block header %}
    <link rel="stylesheet" href="{{ url_for('static',filename='css/base.css') }}">
{% endblock header %}
{% block content %}
    <!-- Main content -->
    <div class="content">

        <div class="row">
            <!-- /.col -->
            <div class="col-md-12">
                <div class="nav-tabs-custom">
                    <ul class="nav nav-tabs">
                        <li class="active"><a href="{{ url_for('admin.arctype') }}" data-toggle="tab"
                                              aria-expanded="true">{{ title }}</a></li>
                    </ul>
                    <div class="box-header">
                        <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
                            添加栏目
                        </button>
                        <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog">
                            <div class="modal-dialog" role="document">
                                <div class="modal-content">
                                    <div class="modal-header">
                                        <button type="button" class="close" data-dismiss="modal"
                                                aria-label="Close"><span
                                                aria-hidden="true">&times;</span></button>
                                        <h4 class="modal-title">添加{{ title }}</h4>
                                    </div>
                                    <div class="modal-body">
                                        <form class="form-horizontal" id="defaultForm">
                                            <div class="form-group">
                                                <label class="col-xs-3 control-label">栏目名称</label>
                                                <div class="col-xs-8">
                                                    <input type="text" class="form-control" placeholder="栏目名称"
                                                           id="tyname"
                                                           name="tyname">
                                                </div>
                                            </div>
                                            <div class="form-group">
                                                <label class="col-xs-3 control-label">SEO关键字</label>
                                                <div class="col-xs-8">
                                                    <input type="text" class="form-control" placeholder="SEO关键字" id="keywords"
                                                           name="keywords">
                                                </div>
                                            </div>

                                            <div class="form-group">
                                                <div class="col-sm-offset-3 col-sm-10">
                                                    <button type="button" class="btn btn-success" id="myDiv">添加</button>
                                                    <button type="button" class="btn btn-default" data-dismiss="modal">
                                                        取消
                                                    </button>
                                                </div>
                                            </div>
                                        </form>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="tab-content">

                        <div class="tab-pane active" id="settings">

                            <table class="table table-striped table-bordered">
                                <tbody>
                                <tr>
                                    <th style="width: 15px;"><input type="checkbox"></th>
                                    <th>栏目名称</th>
                                    <th>文章数量</th>
                                    <th>SEO关键字</th>
                                    <th style="width:100px; text-align: center">操作</th>
                                </tr>
                                {% for type in result %}
                                    <tr>

                                        <td><input type="checkbox"></td>
                                        <td>{{ type.tyname }}</td>
                                        <td>120</td>
                                        <td>{{ type.keywords }}</td>
                                        <td>
                                            <button class="btn btn-dropbox btn-xs js-edit"
                                                    data-href="{{ url_for('admin.editype',id=type.id) }}">编辑
                                            </button>
                                            <button class="btn btn-danger btn-xs js-del"
                                                    data-href="{{ url_for('admin.deltype',id=type.id) }}">删除
                                            </button>
                                        </td>
                                    </tr>
                                {% endfor %}
                                </tbody>
                            </table>
                        </div>
                        <!-- /.box-body -->
                    </div>
                    <!-- 表单 -->
                </div>
            </div>
        </div>
    </div>
    <!-- Main content -->

{% endblock content %}
{% block footer %}
    <script src="{{ url_for('static',filename='js/sduser.js') }}"></script>
    <script src="https://cdn.bootcss.com/bootstrap-validator/0.5.3/js/bootstrapValidator.js"></script>
{% endblock footer %}
{% block js %}
    <script>
        $(function () {
            $("#myDiv").click(function () {
                // 验证表单未输入或者状态不通过是不允许提交
                $('#defaultForm').bootstrapValidator('validate');
                if (!$('#defaultForm').data('bootstrapValidator').isValid()) return;

                // 获取表单的字段和值并返回Json格式
                var datalin = {};
                $('#defaultForm input[name]').each(function () {
                    datalin[this.getAttribute('name')] = this.value;
                });
                var data = {data: JSON.stringify(datalin)}
                console.log(JSON.stringify(data));
                $('#defaultForm').serializeArray()
                // 通过ajax方式提交数据
                $.ajax({
                    url: '{{ url_for('admin.addtype') }}',
                    type: 'POST',
                    data: data,
                    dataType: 'json',
                    success: function (res) {
                        $('#exampleModal').modal('hide')
                        swal(res.result, "", "success")
                        console.log(0)
                    },
                    error: function (res) {
                        $('#exampleModal').modal('hide')
                        swal("失败", "", "error")
                        console.log(1)
                    }

                })
            })
        });
    </script>
{% endblock js %}